<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>
    Rang茶商城</title>
  <!--  引入主页面样式-->
  <link rel="stylesheet" href="./css/index.css">
  <!--  引入初始化样式-->
  <link rel="stylesheet" href="./css/base.css">
  <!-- 引入公共样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./css/swiper.css" />
  <!--  引入jquery文件-->
  <script src="./js/jquery.min.js"></script>
  <!--引入主页面js文件-->
  <script src="./js/index.js"></script>
  <!-- 引入rem js文件 -->
  <script src="./js/flexible.js"></script>
  <!-- 引入公共js文件 -->
  <script src="./js/common.js"></script>
  <!-- Swiper JS -->
  <script src="./js/swiper.js"></script>
</head>

<body>
  <!-- 头部导航栏 -->
  <header>
    <div class="logo">
      <img
        src="https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cHM6Ly81Y2RkM2FhNWM0NmVhLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTkvMDQvZjc0MTI0MDFiMDZjZjdjYmI4OTg5MTBjMTE2YzZlNzYtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp"
        alt="">
    </div>
    <div class="headerbox">
      <ul>
        <li>
          <a href="index.html">首页</a>
        </li>
        <li>
          <a href="about.html">关于</a>
        </li>
        <li>
          <a href="tea.html">茶叶</a>
        </li>
        <li>
          <a href="base.html">基地</a>
        </li>
        <li>
          <a href="news.html">新闻</a>
        </li>
        <li>
          <a href="relation.html">联系</a>
        </li>
      </ul>
    </div>
    <div class="right">
      <img class="searchbtn" src="./images/搜索.svg" alt="">
      <a class="loginBtg" href="./login.html">
        <img src="./images/用户.svg" alt="">
      </a>
      <div class="carBtn">
        <img src="./images/_购物车.svg" alt="">
        <span>0</span>
        <ul class="carLis">
        </ul>
      </div>
      <div class="loginBox">
        <ul>
          <li>
            <a href="./data.html">
              <img src="images/用户-角色-用户名-单人_jurassic.svg" alt="">
              个人资料
            </a>
          </li>
          <li>
            <a href="data.html">
              <img src="images/48银行卡.svg" alt="">
              我的订单
            </a>
          </li>
          <li>
            <a href="javascript:;" class="quitBtn">
              <img src="images/关机.svg" alt="">
              安全退出
            </a>
          </li>
        </ul>
      </div>
    </div>
  </header>
  <!-- 搜索框 -->
  <div class="searchbox">
    <div class="search">
      <h5>搜索</h5>
      <input type="text" placeholder="请输入关键词" name="" id="">
      <div>
        <button class="notarize">确认</button>
        <button class="cancel">取消</button>
      </div>
    </div>
  </div>
  <!-- 大轮播图 -->
  <div class="swiperBox">
    <!-- Swiper -->
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="./images/swiper1.webp" />
        </div>
        <div class="swiper-slide">
          <img src="./images/swiper2.webp" />
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <!-- 背景图片 -->
  <div class="bg"></div>
  <!-- 新茶上市 -->
  <div class="newtea">
    <div class="w">
      <div class="newHead">
        <h1>新茶上市</h1>
        <p>Tea Leave</p>
      </div>
      <!-- 新茶列表 -->
      <ul class="newTeaLis">
        <li>
          <a href="./detail.html?tea=茉莉花茶">
            <img src="./images/new1.webp" alt="">
            <p>茉莉花茶</p>
            <div class="wire">
              <div></div>
            </div>
            <span>￥223.0</span>
          </a>
        </li>
        <li>
          <a href="./detail.html?tea=白牡丹">
            <img src="./images/new2.webp" alt="">
            <p>白牡丹</p>
            <div class="wire">
              <div></div>
            </div>
            <span>￥1235.0</span>
          </a>
        </li>
        <li>
          <a href="./detail.html?tea=白毫银针">
            <img src="./images/new3.webp" alt="">
            <p>白毫银针</p>
            <div class="wire">
              <div></div>
            </div>
            <span>￥258.0</span>
          </a>
        </li>
        <li>
          <a href="./detail.html?tea=云南普洱茶">
            <img src="./images/new4.webp" alt="">
            <p>云南普洱茶</p>
            <div class="wire">
              <div></div>
            </div>
            <span>￥500.0</span>
          </a>
        </li>
        <li>
          <a href="./detail.html?tea=湖北老青茶">
            <img src="./images/new5.webp" alt="">
            <p>湖北老青茶</p>
            <div class="wire">
              <div></div>
            </div>
            <span>￥400.0</span>
          </a>
        </li>
        <li>
          <a href="./detail.html?tea=霍山黄芽蒙洱银针">
            <img src="./images/new6.webp" alt="">
            <p>霍山黄芽蒙洱银针</p>
            <div class="wire">
              <div></div>
            </div>
            <span>￥711.0</span>
          </a>
        </li>
      </ul>
      <a href="./tea.html" class="newSkip">
        <img src="./images/arrows.png" alt="">
      </a>
    </div>
  </div>
  <!-- 关于我们 -->
  <div class="about">
    <div class="w">
      <div class="aboutHeader">
        <h1>关于我们</h1>
        <p>About</p>
      </div>
      <div class="aboutcontent">
        <img src="./images/about.webp" alt="">
        <div class="aboutRight">
          <div class="aboutText">
            <span>茶叶源于中国，茶叶最早是被作为祭品使用的。但从春秋后期就被人们作为菜食，在西汉中期发展为药用，西汉后期才发展为宫廷高级饮料，普及民间作为普通饮料那是西晋以后的事。发现最早人工种植茶叶的遗迹在浙江余姚的田螺山遗址，已有6000多年的历史。饮茶始于中国。</span>
          </div>
          <div class="aboutBtn">
            了解更多
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 图标模块 -->
  <div class="icons">
    <div class="w">
      <ul>
        <li><img src="./images/icon1.webp" alt=""></li>
        <li><img src="./images/icon2.webp" alt=""></li>
        <li><img src="./images/icon3.webp" alt=""></li>
        <li><img src="./images/icon4.webp" alt=""></li>
        <li><img src="./images/icon5.webp" alt=""></li>
        <li><img src="./images/icon6.webp" alt=""></li>
      </ul>
    </div>
  </div>
  <!-- 尾部导航栏 -->
  <footer>
    <div class="main">
      <div class="n">
        <div class="relation">
          <h2>联系</h2>
          <p>Contact</p>
        </div>
        <div class="aboutus">
          <h5>关于我们</h5>
          <img src="./images/微信.svg" alt="">
          <img src="./images/新浪微博.svg" alt="">
        </div>
        <div class="platform">
          <h5>起飞页自助建站平台</h5>
          <p>地址：苏州市建外SOHO东区2号楼</p>
          <p>邮编：100000</p>
          <p>电话：010-69557550</p>
        </div>
        <div class="yard">
          <div>
            <img src="./images/wx.webp" alt="">
            <p>微信</p>
          </div>
          <div>
            <img src="./images/wb.webp" alt="">
            <p>微博</p>
          </div>
        </div>
      </div>
    </div>
    <div class="btntext">
      <div class="n">
        <p class="">
          COPYRIGHT (©) 2019 茶叶类网站 京ICP备41414141414-1号</p>
      </div>
    </div>
  </footer>
  <!-- 右下角电梯 -->
  <div class="elevator">
  </div>
</body>

</html>